<html>
<head>
  <title>Duncan's Just-In-Time Donuts</title>

  <link rel="stylesheet" type="text/css" href="css/donuts.css" />

  <script type="text/javascript">
      function updateOrder() {
          const TAXRATE = 0.0925;
          const DONUTPRICE = 0.50;
          var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value);
          var numGlazedDonuts = parseDonuts(document.getElementById("glazeddonuts").value);
          if (isNaN(numCakeDonuts))
              numCakeDonuts = 0;
          if (isNaN(numGlazedDonuts))
              numGlazedDonuts = 0;
          var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
          var tax = subTotal * TAXRATE;
          var total = subTotal + tax;
          document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
          document.getElementById("tax").value = "$" + tax.toFixed(2);
          document.getElementById("total").value = "$" + total.toFixed(2);
      }

      function parseDonuts(donutString) {
          numDonuts = parseInt(donutString);
          if (donutString.indexOf("dozen") != -1)  //用户输入了一打，数量就要乘以12
              numDonuts *= 12;
          return numDonuts;
      }

      function placeOrder(form) {
          if (document.getElementById("name").value == "")
              alert("I'm sorry but you must provide your name before submitting an order.");
          else if (document.getElementById("pickupminutes").value == "" ||
              isNaN(document.getElementById("pickupminutes").value))
              alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.");
          else
          // Submit the order to the server
              form.submit();
      }
  </script>
</head>

<body>
<div id="frame">
  <div class="heading">Duncan's Just-In-Time Donuts</div>
  <div class="subheading">All donuts 50 cents each, cake or glazed!</div>
  <div id="left">
    <img src="images/donuttime.png" alt="Just-In-Time Donuts" />
  </div>
  <form name="orderform" action="donuts.php" method="POST">
    <div class="field">
      Name: <input type="text" id="name" name="name" value="" />
    </div>
    <div class="field">
      # of cake donuts: <input type="text" id="cakedonuts" name="cakedonuts" value=""
                               onchange="updateOrder();" />
    </div>
    <div class="field">
      # of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value=""
                                 onchange="updateOrder();" />
    </div>
    <div class="field">
      Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" />
    </div>
    <div class="field">
      Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
    </div>
    <div class="field">
      Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" />
    </div>
    <div class="field">
      Total: <input type="text" id="total" name="total" value="" readonly="readonly" />
    </div>
    <div class="field">
      <input type="button" value="Place Order" onclick="placeOrder(this.form);" />
    </div>
  </form>
</div>
</body>
</html>
